<template>
  <j-modal
    :title="title"
    width="80%"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :fullscreen="false"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form" layout="inline" :class="{'online-config-cust':true }">
        <a-list>
          <!-- 表名、表描述、表类型 -->
          <a-list-item>
            <a-row :gutter="gutter" style="width: 100%;">
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="{span:6}"
                  :wrapperCol="{span:18}"
                  label="表名">
                  <a-input :readOnly="editPageFlag" placeholder="请输入表名" v-decorator="['tableName', validatorRules.tableName ]"/>
                </a-form-item>
              </a-col>
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="表描述">
                  <a-input placeholder="请输入表描述" v-decorator="['tableTxt', validatorRules.tableTxt ]"/>
                </a-form-item>
              </a-col>
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="主键策略">
                  <a-select v-decorator="[ 'idType', {initialValue: 'UUID'}]" @change="handleChangeInIdType">
                    <a-select-option value="UUID">ID_WORKER(分布式自增)</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-list-item>
          <a-list-item>
            <a-row :gutter="gutter" style="width: 100%;">

              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="查询模式">
                  <a-select v-decorator="[ 'queryMode', {initialValue: 'single'}]">
                    <a-select-option value="single">单表查询</a-select-option>
                    <a-select-option value="group">组合查询</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="是否分页">
                  <a-select v-decorator="[ 'isPage', {initialValue: 'Y'}]">
                    <a-select-option value="Y">是</a-select-option>
                    <a-select-option value="N">否</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="显示复选框">
                  <a-select v-decorator="[ 'isCheckbox', {initialValue: 'Y'}]">
                    <a-select-option value="Y">是</a-select-option>
                    <a-select-option value="N">否</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-list-item>
          <!-- 显示复选框、是否分页、是否树 -->
          <a-list-item>
            <a-row :gutter="gutter" style="width: 100%;">
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="是否树">
                  <a-select v-decorator="[ 'isTree', {initialValue: 'N'}]" @change="handleChangeInIsTree">
                    <a-select-option value="Y">是</a-select-option>
                    <a-select-option value="N">否</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="源表一">
                  <a-select v-decorator="[ 'isTree', {initialValue: 'N'}]">
                    <a-select-option value="Y">是</a-select-option>
                    <a-select-option value="N">否</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="源表二">
                  <a-select v-decorator="[ 'isTree', {initialValue: 'N'}]" @change="handleChangeInIsTree">
                    <a-select-option value="Y">是</a-select-option>
                    <a-select-option value="N">否</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-list-item>
          <!-- 显示复选框、是否分页、是否树 -->
          <a-list-item v-if="showTreeParentIdField">
            <a-row :gutter="gutter" style="width: 100%;">
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="树表单父ID">
                  <a-input
                    placeholder="请输入树表单父ID字段名"
                    v-decorator=" ['treeParentIdField', validatorRules.treeParentIdField]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24/3">
                <a-form-item
                  style="width: 100%"
                  :labelCol="threeCol.label"
                  :wrapperCol="threeCol.wrapper"
                  label="树开表单列">
                  <a-input
                    placeholder="请输入树开表单列字段名"
                    v-decorator=" ['treeFieldname', validatorRules.treeFieldname]"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-list-item>
        </a-list>
      </a-form>

    </a-spin>
  </j-modal>
</template>

<script>
import Chart from '../../modules/online/cggraphreport/components/Chart.vue'

export default {
  name: 'ManyConfigModal',
  components: {
    Chart
  },
  props: {

  },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      confirmLoading: false,
      title: '新增',
      gutter: 8,
      validatorRules: {
        tableName: {
          rules: [{
            required: true, message: '请输入表名!'
          }, {
            validator: this.validateTableName
          }]
        },
        tableTxt: { rules: [{ required: true, message: '请输入表说明!' }] },
        idSequence: { rules: [{ required: true, message: '请输入序号名称!' }] },
        treeParentIdField: { rules: [{ required: true, message: '请输入树表单父ID!' }] },
        treeFieldname: { rules: [{ required: true, message: '请输入树开表单列!' }] },
        treeIdField: { rules: [{ required: true, message: '请输入是否有子节点字段名!' }] },
        tabOrderNum: {
          initialValue: 1,
          rules: [{ required: true, message: '请输入序号！' }]
        }
      },
      editPageFlag: false,
      threeCol: {
        label: { span: 6 },
        wrapper: { span: 24 - 6 }
      },
      showIdSequence: false,
      showTreeParentIdField: false

    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    add() {
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.visible = false
    },
    handleChangeInIdType(value) {
      this.showIdSequence = (value === 'SEQUENCE')
    },
    handleChangeInIsTree(value) {
      this.showTreeParentIdField = (value === 'Y')
      if (value === 'Y') {
        // this.addTreeNeedField()
      } else {
        // this.deleteTreeNeedField()
      }
    }
  }
}
</script>

<style scoped>
</style>
